<template>
    <section id="shop-car">
        <div class="nav">
            <i></i>
            <span>购物车</span>
            <u></u>
        </div>
        <div class="shop-list" v-for="(items,indexs) in nameList" :key="indexs">
            <p>
                <input name="shopcheck" type="checkbox" @click="perAllCheck($event,indexs)" />
                <span>{{items}}</span>
            </p>
            <ul>
                <li v-for="(item,index) in datas[items].list" :key="index">
                    <input name="check" type="checkbox" @click="checkbox($event,indexs,index)" />
                    <img :src="item.pic" alt />
                    <div>
                        <h5 class="title">{{item.title}}</h5>
                        <p>
                            颜色：黑色；尺码：M
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xiangxiazhankai" />
                            </svg>
                        </p>
                        <br />
                        <span>降价{{item.lowPrice}}元</span>
                        <div class="op-num">
                            <p>
                                <u>￥</u>
                                <span class="price">{{item.price}}</span>
                            </p>
                            <p class="operation">
                                <b @click="mul(indexs,index)">-</b>
                                <span class="num">{{item.num}}</span>
                                <b @click="add(indexs,index)">+</b>
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <div class="totle">
            <p>
                <input type="checkbox" name="allchecks" @click="allCheck($event)" />
                <span>全选(4)</span>
            </p>
            <p class="right">
                <span>
                    <u>￥</u>
                    <span>{{total}}</span>
                </span>
                <span class="to-buy">结算</span>
            </p>
        </div>
    </section>
</template>

<script>
import { Toast } from "mint-ui";

export default {
    data() {
        return {
            total: 0,
            price: 25,
            datas: [],
            nameList: [],
            allCheckFlag: false,
            numList : {
                MOlly小姐:{
                    list:[
                        {
                            price:50,
                            num:1
                        },{
                            price:60,
                            num:1
                        }
                    ]
                },
                hahaha:{
                    list:[
                        {
                            price:50,
                            num:1
                        },
                        {
                            price:60,
                            num:1
                        }
                    ]
                }
            }
        };
    },
    methods: {
        // 减少数量
        mul(is, i) {
            var num = this.datas[this.nameList[is]].list[i].num;
            if (num <= 1) {
                Toast({
                    message: "商品数量不能低于1",
                    position: "middle",
                    duration: 3000
                });
            } else {
                this.datas[this.nameList[is]].list[i].num--;
                // this.numList[this.nameList[is]].list[i].num--;
            }
        },
        // 增加数量
        add(is, i) {
            var num = this.datas[this.nameList[is]].list[i].num;
            if (num >= 5) {
                Toast({
                    message: "超出购买数量",
                    position: "middle",
                    duration: 2000
                });
            } else {
                this.datas[this.nameList[is]].list[i].num++;
                // this.numList[this.nameList[is]].list[i].num++;
            }
        },

        // 个人店铺是否全选
        perAllCheck(e, i) {
            var inputAll = document.getElementsByName("shopcheck");
            var check = document.getElementsByName("check");
            var input = e.target.parentNode.parentNode.getElementsByTagName("ul")[0].getElementsByTagName("input");
            var s1 = -1;
            for (var j = 0; j < input.length; j++) {
                if (e.target.checked == true) {
                    input[j].checked = true;
                } else {
                    input[j].checked = false;
                    document.getElementsByName('allchecks')[0].checked = false;
                }
            }

            for(var z = 0;z<inputAll.length;z++){
                if(inputAll[z].checked == false){
                    s1 = 0;
                    break;
                }
            }
            if(s1 != 0){
                document.getElementsByName('allchecks')[0].checked = true;
            }
        },
        // 个人店铺商品全部选中，店铺选中
        checkbox(e, is, i) {
            var input = document.getElementsByName("shopcheck");
            var parent = document.getElementsByClassName("shop-list")[is];
            var shopList = parent.getElementsByTagName("input");
            var s = -1;
            var s1 = -1;
            for (var j = 1; j < shopList.length; j++) {
                if (shopList[j].checked == false) {
                    s = 1;
                    document.getElementsByName('allchecks')[0].checked = false;
                    break;
                }
            }
            if (s != 1) {
                input[is].checked = true;
            } else {
                input[is].checked = false;
            }
            // 判断全选
            for(var z = 0;z<input.length;z++){
                if(input[z].checked == false){
                    s1 = 0;
                    break;
                }
            }
            if(s1 != 0){
                document.getElementsByName('allchecks')[0].checked = true;
            }
        },

        // 全选，所有店铺和商品选中
        allCheck(e) {
            var allInput = document.getElementsByTagName("input");
            var allShopName = document.getElementsByName("shopcheck");
            if (this.allCheckFlag) {
                for (var j = 0; j < allInput.length; j++) {
                    allInput[j].checked = false;
                }
                this.allCheckFlag = !this.allCheckFlag;
            } else {
                for (var j = 0; j < allInput.length; j++) {
                    allInput[j].checked = true;
                }
                this.allCheckFlag = !this.allCheckFlag;
            }
            
        }
        // totalPrice(){
        //     var check = document.getElementsByName("check");
        //     var allShop = document.getElementsByName("shopcheck");
        //     for(var i = 0;i<allShop.length;i++){
        //         for(var j = 0;j<allShop[i].check.length;j++){
        //             this.total = this.datas[this.nameList[i]].list[j].price*this.datas[this.nameList[i]].list[j].num;
        //         }
        //     }
        // }
    },
    mounted() {
        this.$http.get("./data/car.json").then(res => {
            this.datas = res.data;
            this.nameList = Object.keys(res.data);
        });
    }
};
</script>

<style lang="scss">
#shop-car {
    background-color: #efefef;
    height: 100vh;
    padding-bottom: 50px;
    @mixin i {
        width: 20px;
        height: 20px;
        display: inline-block;
        border-radius: 50%;
        -webkit-appearance: none;
        outline: none;
        border: 1px solid rgb(212, 212, 212);
        &:checked {
            background: url("../../assets/images/car/check40x40.png");
            background-size: contain;
        }
    }
    .nav {
        display: flex;
        padding: 10px;
        background-color: white;
        justify-content: space-between;
        border-bottom: 1px solid rgb(182, 182, 182);
        span {
            font-size: 20px;
            color: rgb(73, 71, 71);
        }
        i,
        u {
            display: inline-block;
            width: 25px;
            height: 25px;
        }
        i {
            background: url("../../assets/images/mine/return.png") no-repeat
                center/contain;
        }
        u {
            background: url("../../assets/images/home-chat.png") no-repeat
                center/contain;
        }
    }
    .shop-list {
        margin: 10px;
        padding: 20px 15px;
        border-radius: 5px;
        background-color: white;
        & > p {
            margin-bottom: 20px;
            input {
                @include i;
            }
            span {
                font-weight: 600;
            }
        }
        & > ul {
            li {
                position: relative;
                input {
                    @include i;
                    position: absolute;
                    left: 0;
                    top: 35%;
                }
                & > img {
                    width: 25%;
                    margin: 0px 10px;
                    position: absolute;
                    top: 0;
                    left: 7%;
                }
                & > div {
                    width: 60%;
                    margin-left: 40%;
                    h5 {
                        font-size: 12px;
                        font-weight: bold;
                    }
                    & > p {
                        display: inline-block;
                        font-size: 12px;
                        color: rgb(155, 155, 155);
                        margin: 6px 0;
                        background-color: rgb(240, 240, 240);
                        svg {
                            transform: scale(1.7);
                        }
                    }
                    & > span {
                        display: inline-block;
                        font-size: 12px;
                        color: #ff4466;
                        border: 1px solid #ff4466;
                        padding: 1px 2px;
                    }
                }
            }
            .op-num {
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
                u {
                    text-decoration: none;
                    font-size: 12px;
                    color: #ff4466;
                }
                .price {
                    font-size: 18px;
                    color: #ff4466;
                    font-weight: bold;
                }
                .operation {
                    line-height: 24px;
                    padding: 0 10px;
                    background-color: rgb(240, 240, 240);
                    border-radius: 20px;
                    span {
                        font-size: 13px;
                        padding: 0 15px;
                        font-weight: bold;
                    }
                    b {
                        color: rgb(189, 189, 189);
                    }
                }
            }
        }
    }
    .totle {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 92%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 4%;
        line-height: 0px;
        background-color: white;
        input {
            @include i;
        }
        .right {
            color: #ff4466;
            u {
                text-decoration: none;
                font-size: 12px;
            }
            .to-buy {
                background-color: #ff4466;
                color: white;
                padding: 3px 13px;
                font-size: 14px;
                border-radius: 20px;
            }
        }
    }
}
</style>